<template>
  <div style="text-align: left">
    <el-select v-model="param.currentParamHis" value-key="id" @change="init" size="small" filterable>
      <el-option
          v-for="option in param.apiParamHisList"
          :key="option.id"
          :label="option.paramName"
          :title="option.paramDesc"
          :value="option"
      ></el-option>
    </el-select>
    <el-button @click="updateParamHis" size="small" style="margin-left: 8px">修改</el-button>
    <el-button @click="addParamHis" size="small">增加</el-button>
    <my-descript :show-str="getDesc(param.currentParamHis.paramDesc)" :write-flag="writeFlag" @update="updateParamHis"/>

    <h3>{{ apiMenuTitle.paramHis.children.input }}</h3>
    <el-collapse v-model="descCollapseInput" v-if="this.inputFlag">
      <div v-if="isDisplay(inputFields[0])">
        <el-collapse-item :title="fieldTitle[inputFields[0]]" name="paramInputHeaderStr">
          <my-code :show-str="param.currentParamHis[inputFields[0]]" :write-flag="writeFlag" @update="updateParamHis"/>
        </el-collapse-item>
      </div>
      <div v-if="isDisplay(inputFields[1])">
        <el-collapse-item :title="fieldTitle[inputFields[1]]" name="paramInputPathStr">
          <my-code :show-str="param.currentParamHis[inputFields[1]]" :write-flag="writeFlag" @update="updateParamHis"/>
        </el-collapse-item>
      </div>
      <div v-if="isDisplay(inputFields[2])">
        <el-collapse-item :title="fieldTitle[inputFields[2]]" name="paramInputQueryStr">
          <my-code :show-str="param.currentParamHis[inputFields[2]]" :write-flag="writeFlag" @update="updateParamHis"/>
        </el-collapse-item>
      </div>
      <div v-if="isDisplay(inputFields[3])">
        <el-collapse-item :title="fieldTitle[inputFields[3]]" name="paramInputBodyStr">
          <my-code :show-str="param.currentParamHis[inputFields[3]]" :write-flag="writeFlag" @update="updateParamHis"/>
        </el-collapse-item>
      </div>
    </el-collapse>
    <span v-else>无数据</span>

    <h3>{{ apiMenuTitle.paramHis.children.output }}</h3>
    <el-collapse v-model="descCollapseOutput" v-if="outputFlag">
      <div v-if="isDisplay(outputFields[0])">
        <el-collapse-item :title="fieldTitle[outputFields[0]]" name="paramOutputHeaderStr">
          <my-code :show-str="param.currentParamHis[outputFields[0]]" :write-flag="writeFlag" @update="updateParamHis"/>
        </el-collapse-item>
      </div>
      <div v-if="isDisplay(outputFields[1])">
        <el-collapse-item :title="fieldTitle[outputFields[1]]" name="paramOutputBodyStr">
          <my-code :show-str="param.currentParamHis[outputFields[1]]" :write-flag="writeFlag" @update="updateParamHis"/>
        </el-collapse-item>
      </div>
    </el-collapse>
    <span v-else>无数据</span>
  </div>

  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
    <el-form ref="paramForm" :model="param.currentParamHis"
             :rules="rules"
             label-width="120px">
      <el-form-item label="参数名称" prop="paramName">
        <el-input v-model="param.currentParamHis.paramName" placeholder="请输入名称" clearable/>
      </el-form-item>
      <el-form-item label="参数描述">
        <el-input v-model="param.currentParamHis.paramDesc" placeholder="请输入参数描述" clearable type="textarea"/>
      </el-form-item>

      <el-form-item v-for="key in fields" :label="fieldTitle[key]">
        <el-input v-model="param.currentParamHis[key]" :placeholder="'请输入'" type="textarea"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveParam">保存</el-button>
    </div>
  </el-dialog>

</template>

<script>

import CommonUtils from "@/utils/CommonUtils";
import {ElMessage} from "element-plus";
import myaxios from "@/plugins/myaxios";
import ApiDocConstants from "@/utils/api-utils/ApiDocConstants";
import MyCode from "@/components/util/MyCode";
import MyDescript from "@/components/util/MyDescript";
import FormRules from "@/utils/FormRules";

export default {
  name: "ParamHist",
  components: {MyDescript, MyCode},
  props: {
    param: Object, // 传入的参数对象
    writeFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: ApiDocConstants.documentsInfo.currentApiInfo.currentParamHis,
      dialogTitle: '增加接口示例',
      dialogVisible: false,
      fields: ['paramInputPathStr', 'paramInputHeaderStr', 'paramInputQueryStr', 'paramInputBodyStr', 'paramOutputHeaderStr', 'paramOutputBodyStr'],
      fieldTitle: ApiDocConstants.apiMenuTitle.paramHis.childrenTitles,
      apiMenuTitle: ApiDocConstants.apiMenuTitle,
      addFlag: false,
      rules: {
        paramName: FormRules.rules.name
      },
      inputFields: ['paramInputHeaderStr', 'paramInputPathStr', 'paramInputQueryStr', 'paramInputBodyStr'],
      outputFields: ['paramOutputHeaderStr', 'paramOutputBodyStr'],
      descCollapseInput: ['paramInputHeaderStr', 'paramInputPathStr', 'paramInputQueryStr', 'paramInputBodyStr'],
      descCollapseOutput: ['paramOutputHeaderStr', 'paramOutputBodyStr'],
      inputFlag: false,
      outputFlag: false
    }
  },
  methods: {
    saveParam() {
      this.$refs.paramForm.validate(valid => {
        if (valid) {
          myaxios.post('/dist/api/upsertParamHis', this.param.currentParamHis,
              {
                params: {
                  addRltFlag: true
                }
              }
          ).then(rep => {
            // 处理rep
            if (rep.data.code !== 100) {
              ElMessage.error(rep.data.msg);
              return;
            }
            this.$emit('findApiInfo');
            ElMessage.success("修改成功。");
            if (this.addFlag) {
              let data = rep.data.data.currentParamHis
              this.param.apiParamHisList.unshift(data)
              this.param.currentParamHis = data
            }
            this.dialogVisible = false
          }, err => {
            ElMessage.error(err.response.data)
          })
        } else {
          ElMessage.error("参数需要符合规范。")
        }
      });
    },
    addParamHis() {
      this.param.currentParamHis = CommonUtils.cloneObj(this.formData)
      this.param.currentParamHis.envId = 1
      this.param.currentParamHis.apiId = this.param.apiInfo.id
      this.dialogVisible = true
      this.addFlag = true
      this.dialogTitle = '增加示例'
    },
    updateParamHis() {
      if (!this.param.currentParamHis) {
        ElMessage.warning("未选择示例，不能修改。")
        return
      }
      if (!this.param.currentParamHis.envId && this.param.currentParamHis.envId !== 0) {
        this.param.currentParamHis.envId = 1
      }
      if (!this.param.currentParamHis.apiId && this.param.currentParamHis.apiId !== 0) {
        this.param.currentParamHis.apiId = this.param.apiInfo.id
      }
      this.dialogVisible = true
      this.addFlag = false
      this.dialogTitle = '示例修改'
    },
    isDisplay(field) {
      let str = this.param.currentParamHis[field]
      return str && str !== ''
    },
    init() {
      let param = this.param

      for (const inputField of this.inputFields) {
        let val = param.currentParamHis[inputField]
        let index = this.descCollapseInput.indexOf(inputField)
        if (val && val !== '') {
          if (index < 0) {
            this.descCollapseInput.splice(0, 0, inputField)
          }
        } else {
          if (index > -1) {
            this.descCollapseInput.splice(index, 1)
          }
        }
      }
      // 入参示例是否为空
      this.inputFlag = this.descCollapseInput.length > 0

      for (const field of this.outputFields) {
        let val = param.currentParamHis[field]
        let index = this.descCollapseOutput.indexOf(field)
        if (val && val !== '') {
          if (index < 0) {
            this.descCollapseOutput.splice(0, 0, field)
          }
        } else {
          if (index > -1) {
            this.descCollapseOutput.splice(index, 1)
          }
        }
      }
      // 返回示例是否为空
      this.outputFlag = this.descCollapseOutput.length > 0
    },
    getDesc(data) {
      return (!data || data === '') ? '无示例说明' : data
    }
  },
  watch: {
    param: function (newValue, oldValue) {
      this.init()
    }
  }
}
</script>

<style scoped>

.el-collapse-item__header {
  font-size: 14px !important;
  color: black !important;
}

</style>